@extends('layouts.app')
@section('title','精品推荐')
@section('content')

<!-- start: Content -->
<div class="row-fluid">
	<div class="box span12">
		<div class="box-header">
			<h2><i class="icon-edit"></i>添加精品推荐</h2>
		</div>
		<div class="box-content">
			<form action="{{ URL('app/jingpin') }}" method="POST" enctype="multipart/form-data">  
    		{{ csrf_field() }}
		      	<fieldset>
					<div  class="control-group">
					  <label class="control-label" for="textarea2">服务简介:</label>
					  <div class="controls">
						<textarea style='width:665px;height:65px;' name='commit'  rows="3" maxlength="50"></textarea>
						<p class="help-block" style='color:red;'>服务简介最多可以输入50字!</p>
					  </div>
					</div>
					<div class="control-group">
				  		<label class="control-label" for="fileInput">精品推荐</label>
						  <div class="controls" style='width:535px;height:420px;overflow:auto'>
								@foreach($serve as $sv)
									<div style='border:1px solid black;width:500px;height:120px;padding-top: 15px;padding-left: 15px;'>
										<tr>
											<td>
												<img src="{{ $sv->path }}" style='width:90px;height:90px;float:left;margin-right: 10px;'>
												<div style='float:left;margin-right: 15px;'>
													<span style='float:left;font-weight:bold;'>{{ $sv->title }}</span><br>
													<p style='float:left;width:225px;'>
														{{ $sv->commit }}
													</p>
												</div>
											</td>
											<td class="center"  style='line-height: 150px;'>原价：{{ $sv->price }}元<br></td>
											<input type="hidden" name='price' value="{{ $sv->price }}">
											<input type="hidden" name='is_price' value="{{ $sv->is_price }}">
											<td class="center" style='line-height: 150px;'>现价：{{ $sv->is_price }}元<br></td>
											<td class="center" style='line-height: 150px;'>VIP价：{{ $sv->vip_price }}元</td>
											<td>
												<div class="radio" style='float:right;margin-right: 5px;'>
												  <label id='checkboxs'>
												    <input id="mychk" type="radio" name="id" value="{{ $sv->id }}">
												  </label>
												</div>
											</td>
										</tr>
									</div>		
								@endforeach
								
						  </div>
					</div>
					<div class="control-group">
				  		<label class="control-label" for="fileInput">列表展示图</label>
					  	<div class="controls">
						  	<div style='float:left;' id="localImag">
						  		<img id="preview1" style='float:left;' src="/images/upload.png" style="display: block; width: 150px; height: 150px;">
						  	</div>
						  	<div style='float:left;' id="localImag2">
						  		<img id="preview2" style='float:left;'  src="/images/upload.png" style="display: block; width: 150px; height: 150px;">
						  	</div>
						  	<div style='float:left;' id="localImag3">
						  		<img id="preview3" style='float:left;'  src="/images/upload.png" style="display: block; width: 150px; height: 150px;">
						  	</div>
						  	<div>
						  		<input type="file" name="fileimg[]" id="doc" style="width:150px;" onchange="javascript:setImagePreview();">
	        					<input type="file" name="fileimg[]" id="doc2" style="width:150px;" onchange="javascript:setImagePreview2();">
								<input type="file" name="fileimg[]" id="doc3" style="width:150px;" onchange="javascript:setImagePreview3();">
								<p class="help-block" style='color:red;'>注：图片比例为1：1，图片尺寸为360*360、720*720（参考），图片格式可为JPG，PNG</p>
						  	</div>
					  	</div>

					<div style='margin-top: 130px;' class="form-actions">
				  		<button type="submit" class="btn btn-primary">确定</button>
					</div>
				</fieldset>	
	     	</form>
		</div>
	</div>
</div>

@stop
<script type="text/javascript">


  function setImagePreview(avalue) {
                var docObj = document.getElementById("doc");
                var imgObjPreview = document.getElementById("preview1");
                if(docObj.files && docObj.files[0])
                {
                    //火狐下，直接设img属性
                    imgObjPreview.style.display = 'block';
                    imgObjPreview.style.width = '150px';
                    imgObjPreview.style.height = '150px';
                    //imgObjPreview.src = docObj.files[0].getAsDataURL();
                    //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
                }
                else
                {
                    //IE下，使用滤镜
                    docObj.select();
                    var imgSrc = document.selection.createRange().text;
                    var localImagId = document.getElementById("localImag"); //必须设置初始大小
                    localImagId.style.width = "150px";
                    localImagId.style.height = "150px"; //图片异常的捕捉，防止用户修改后缀来伪造图片
                    try {
                        localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                    } catch(e) {
                        alert("您上传的图片格式不正确，请重新选择!");
                        return false;
                    }
                    imgObjPreview.style.display = 'none';
                    document.selection.empty();
                }
                return true;
            }

  function setImagePreview2(avalue) {
                var docObj = document.getElementById("doc2");
                var imgObjPreview = document.getElementById("preview2");
                if(docObj.files && docObj.files[0])
                {
                    //火狐下，直接设img属性
                    imgObjPreview.style.display = 'block';
                    imgObjPreview.style.width = '150px';
                    imgObjPreview.style.height = '150px';
                    //imgObjPreview.src = docObj.files[0].getAsDataURL();
                    //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
                }
                else
                {
                    //IE下，使用滤镜
                    docObj.select();
                    var imgSrc = document.selection.createRange().text;
                    var localImagId = document.getElementById("localImag2"); //必须设置初始大小
                    localImagId.style.width = "150px";
                    localImagId.style.height = "150px"; //图片异常的捕捉，防止用户修改后缀来伪造图片
                    try {
                        localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                    } catch(e) {
                        alert("您上传的图片格式不正确，请重新选择!");
                        return false;
                    }
                    imgObjPreview.style.display = 'none';
                    document.selection.empty();
                }
                return true;
            }

  function setImagePreview3(avalue) {
                var docObj = document.getElementById("doc3");
                var imgObjPreview = document.getElementById("preview3");
                if(docObj.files && docObj.files[0])
                {
                    //火狐下，直接设img属性
                    imgObjPreview.style.display = 'block';
                    imgObjPreview.style.width = '150px';
                    imgObjPreview.style.height = '150px';
                    //imgObjPreview.src = docObj.files[0].getAsDataURL();
                    //火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                    imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
                }
                else
                {
                    //IE下，使用滤镜
                    docObj.select();
                    var imgSrc = document.selection.createRange().text;
                    var localImagId = document.getElementById("localImag3"); //必须设置初始大小
                    localImagId.style.width = "150px";
                    localImagId.style.height = "150px"; //图片异常的捕捉，防止用户修改后缀来伪造图片
                    try {
                        localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                        localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                    } catch(e) {
                        alert("您上传的图片格式不正确，请重新选择!");
                        return false;
                    }
                    imgObjPreview.style.display = 'none';
                    document.selection.empty();
                }
                return true;
            }
</script>